<template>
    <div>
        <div class="parameter_page">
          <el-form ref="form" :model="form" :rules="rules" label-width="150px" style="width: 80%" >
            <el-row >
              <el-col :span="10">
                <el-form-item label="旧密码" prop="oldPassword" >
                  <el-input maxlength="20" v-model="form.oldPassword" ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row >
              <el-col :span="10">
                <el-form-item label="新密码" prop="password">
                  <el-input maxlength="20" v-model="form.password" ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row >
              <el-col :span="10">
                <el-form-item label="确认密码" prop="confirmPwd">
                  <el-input maxlength="20" v-model="form.confirmPwd" ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <el-button type="primary" @click="saveEdit('form')">保存</el-button>
    </div>

</template>

<script>
    import { updatePwd} from '../../api/sysUser';
    import { _dateFormat} from '../../utils/tool';
    import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
    export default {
        name: 'basetable',
        components: { ElImageViewer },
        data() {
            return {
                query: {
                    status:'',
                    pageIndex: 1,
                    pageSize: 10
                },
                previewFlg:false,
                previewSrc: '',
                tableData: [],
                multipleSelection: [],
                groupList:[],
                editVisible: false,
                pageTotal: 0,
                form: {
                },
                rules:{
                  oldPassword :[{required: true, message: '旧密码不能为空', trigger: 'blur'}],
                  password :[{required: true, message: '新密码不能为空', trigger: 'blur'}, {min: 6,message: "密码最少6位" }],
                  confirmPwd :[{required: true, message: '确认密码不能为空', trigger: 'blur'}],
                },
                idx: -1,
                id: -1,
            };
        },
        created() {
        },
        filters:{
            //格式化后台传过来的时间戳
            dateFormat(time) {
                let date = new Date(time);
                return _dateFormat(date,'yyyy-MM-dd hh:mm')
            },
        },
        methods: {
                // 触发搜索按钮
            handleSearch() {
                this.$set(this.query, 'pageIndex', 1);
                this.getData();
            },
            // 保存编辑
            saveEdit(formData) {
                var that = this;
                that.form.id = localStorage.getItem('ms_userid');
                this.$refs[formData].validate((valid) => {
                  if (valid) {
                    if(that.form.password != that.form.confirmPwd){
                      this.$message.error("两次密码输入不一致");
                      return;
                    }
                    // 新增
                    updatePwd(this.form).then(res => {
                      if(res == -1){
                        this.$message.error("旧密码不正确");
                        return;
                      }
                      this.$message.success("保存成功");
                      localStorage.removeItem('ms_username');
                      localStorage.removeItem('X-Token');
                      this.$router.push('/login');
                      this.butCancel();
                    }).catch((res) => {
                      this.$message.error(res.errorMsg);
                    });
                  }
                })

            },
            butCancel(){
                this.editVisible = false;
                Object.keys(this.form).forEach(key => (this.form[key] = ''));
            },
            // 分页导航
            handlePageChange(val) {
                this.$set(this.query, 'pageIndex', val);
                this.getData();
            }
        }
    };
</script>

<style scoped>
    .parameter_page{
      display: flex;
      justify-content: center;
      align-items: center;
    }
</style>